<!--yb 2023年3月15日15:00:13-->
<!--  竞拍管理  -->
<template>
  <div>
      <el-card class="box-card1">
          <div>
                  <span class="demonstration" style="margin-left: 30px;color: #909399;">拍卖时间&nbsp;&nbsp;:</span>
                  <el-date-picker style="margin-left: 20px;"
                    v-model="queryGoodsInfoSelectAll.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>

              <el-button type="danger" plain @click="getpublishSelectAll()" style="margin-left: 80px;">查询</el-button>
              <el-button icon="el-icon-delete" @click="resetting" style="margin-left: 40px; background-color: #d7000f;  border: 1px solid #d7000f; color:#fff ">重置</el-button>
            </div>
      </el-card>
      <el-card class="box-card2" style="margin-top: 20px;">
          <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="goodsNumber" label="竞拍编号" width="200px">
              </el-table-column>
              <el-table-column  prop="transactionStatus" label="交易状态" width="100px" >
                <template slot-scope="scope">
                  <span v-for="item in status" :key="item.id">
                    <span v-if="item.id == scope.row.transactionStatus">{{item.value}}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="拍品名称" width="150px">
              </el-table-column>
              <el-table-column
              label="倒计时"
              width="200px">
              <template slot-scope="scope">
                <!-- {{scope.row.endTime }} -->
                  <CountDown1 class="countDown"
                    v-if="viewDialog"
                    v-on:start_callback="countDownS_cb(1)"
                    v-on:end_callback="countDownE_cb(1)"
                    :startTime=aaa
                    :endTime=Date.parse(scope.row.endTime)
                    :dayTxt="'天'"
                    :hourTxt="'小时'"
                    :minutesTxt="'分钟'"
                    :secondsTxt="'秒'">
                  </CountDown1>
                </template>
              </el-table-column>
              <el-table-column prop="contactName" label="联系人" width="80px">
              </el-table-column>
              <el-table-column prop="phone" label="联系方式" width="120px">
              </el-table-column>
              <el-table-column prop="startTime" label="竞拍开始时间" width="200" value-format="yyyy-MM-dd HH:mm:ss">
              </el-table-column>
              <el-table-column prop="endTime" label="竞拍截止时间" width="200" value-format="yyyy-MM-dd HH:mm:ss">
              </el-table-column>
              <el-table-column prop="number" label="数量">
              </el-table-column>
              <el-table-column prop="weight" label="重量">
              </el-table-column>
              <el-table-column prop="earnestMoney" label="保证金">
              </el-table-column>
              <el-table-column prop="back" label="备注">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="350px">
                  <template slot-scope="scope">
                    <el-button  type="danger" size="medium" plain @click="information(scope.row)">详情</el-button>
                    <!-- id=yiShenbohui v-if判断条件：2初始审核通过，，3已驳回 -->
                    <el-button id=yiShenbohui  size="medium" style="background-color: #d7000f; color: #fff"
                    plain @click="goodsInfoUpdateReject (scope.row.id)"
                    v-if=" scope.row.transactionStatus === 2 && scope.row.transactionStatus !== 1 && scope.row.transactionStatus !== 3">下架</el-button>
                    </template>
              </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
              :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
              style="float:right;margin-right: 40%;">
          </el-pagination>
      </el-card>
      <!-- 下架弹窗 -->
      <el-dialog title="提示" :visible.sync="goodsInfoUpdateReject1" width="30%">
        <div>拍品下架</div>
        <el-button @click="goodsInfoUpdateReject1 = false">取 消</el-button>
          <el-button type="primary" @click="goodsInfoUndercarriage()">确 定</el-button>
      </el-dialog>
      <!-- 详情弹窗 -->
      <el-dialog title="提示" :visible.sync="information1" width="30%">
        <el-form ref="list" :model="tableFrom" label-width="80px">
                    <el-form-item label="竞拍编号">
                        <el-input v-model="tableFrom.goodsNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="交易状态">
                        <el-input v-model="tableFrom.transactionStatus"></el-input>
                    </el-form-item>
                    <el-form-item label="拍品名称">
                        <el-input v-model="tableFrom.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="tableFrom.contactName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="tableFrom.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-input v-model="tableFrom.startTime" ></el-input>
                    </el-form-item>
                    <el-form-item label="截止时间">
                        <el-input v-model="tableFrom.endTime"></el-input>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input v-model="tableFrom.number"></el-input>
                    </el-form-item>
                    <el-form-item label="重量">
                        <el-input v-model="tableFrom.weight"></el-input>
                    </el-form-item>
                    <el-form-item label="保证金">
                        <el-input v-model="tableFrom.earnestMoney"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="tableFrom.back"></el-input>
                    </el-form-item>
        </el-form>
            <el-button type="small" @click="information1=false">关闭</el-button>
      </el-dialog>
  </div>
</template>

<script>
import CountDown1 from 'vue2-countdown'
export default {
  components: {
    CountDown1
  },
  data () {
    return {
      // 状态判断
      status:
      [
        {
          id: 1,
          value: '未开始'
        },
        {
          id: 2,
          value: '进行中'
        },
        {
          id: 3,
          value: '已结束'
        }
      ],
      value: '',
      input: '',
      value1: '',
      tableData: [], // 全查
      information1: false, // 详情弹窗
      queryGoodsInfoSelectAll: {
        contactName: '',
        phone: '',
        transactionStatus: '',
        time: [],
        startTime: '',
        endTime: ''
      },
      page: {
        total: 0, // 数据总条数
        pageNum: 1, // 当前页
        pageSize: 5// 每页条数
      },
      tableFrom: [], // 查询tableFrom详情
      id: '', // 获取修改状态id
      goodsInfoUpdateReject1: false, // 修改下架弹窗
      startTimes: 0, // 倒计时
      endTimes: 0, // 倒计时
      aaa: 0, // 获取当前时间
      viewDialog: true // 倒计时刷新
    }
  },
  mounted () {
    this.getpublishSelectAll() // 初始化
  },
  methods: {
    countDownS_cb: function (x) { // 开始倒计时进行的回调
      console.log(x, '开始')
    },
    countDownE_cb: function (x) { // 倒计时结束进行的回调
    },
    goodsInfoUpdateReject (data) {
      this.goodsInfoUpdateReject1 = true
      this.id = JSON.parse(JSON.stringify(data))
    },
    // 下架弹窗
    goodsInfoUndercarriage () {
      this.$axios
        .get('GoodsInfo/goodsInfoUndercarriage', {
          params: {
            id: this.id
          }
        }).then((res) => {
          if (res.data.flag > 0) {
            // 关闭修改窗口
            this.goodsInfoUpdateReject1 = false
            // 初始化菜单信息
            this.getpublishSelectAll()
            this.message('恭喜你，下架成功！', 'success')
          } else {
            this.message('对不起，下架失败！', 'warning')
          }
        }).catch(err => {
          console.log(err)
        })
    },
    getpublishSelectAll () { // 查询
      this.aaa = parseInt(new Date().getTime() / 1000) // 倒计时获取当前时间作为开始时间
      this.viewDialog = false // 倒计时刷新
      // 判断time有没有值
      if (this.queryGoodsInfoSelectAll.time != null) {
        this.queryGoodsInfoSelectAll.startTime = this.queryGoodsInfoSelectAll.time[0]
        this.queryGoodsInfoSelectAll.endTime = this.queryGoodsInfoSelectAll.time[1]
      }
      this.$axios.get('/GoodsInfo/goodsInfoFollow', { // 链接后端
        params: {
          startTime: this.queryGoodsInfoSelectAll.startTime,
          endTime: this.queryGoodsInfoSelectAll.endTime,
          pageNum: this.page.pageNum, // 当前页
          pageSize: this.page.pageSize // 每页条数
        }
      }).then(res => {
        if (res.data.flag) {
          this.tableData = res.data.obj.content
          this.page.total = res.data.obj.total
          this.viewDialog = true // 倒计时刷新
        }
      }).catch(err => {
        this.myMessage('error', err)
      })
    },
    /* 搜索栏重置按钮 */
    resetting () {
      this.queryGoodsInfoSelectAll.checkStatus = ''
      this.queryGoodsInfoSelectAll.time = []
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getpublishSelectAll()
    },
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.getpublishSelectAll()
    },
    // 弹窗详情
    information (data) {
      this.tableFrom = data
      this.information1 = true
    },
    formatDate (value) { // 时间戳转换日期格式方法
      if (value == null) {
        return ''
      } else {
        const date = new Date(value)
        const y = date.getFullYear()// 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate() // 日
        d = d < 10 ? ('0' + d) : d
        return y + '-' + MM + '-' + d
      }
    }

  }
}
</script>

<style >
.box-card2{
    width: 100%;
    height: 900px;
}

</style>
